<script setup>
// 你可以在这里直接使用组合式 API
</script>

<template>
  <footer class="footer">
    <div class="footer-row">
      <!-- 关于我们 -->
      <span>关于我们</span>
      <!-- 电话图标 -->
      <i class="iconfont icon-dianhua"></i>
      <span>400-100-111</span>
      <!-- 信箱图标 -->
      <i class="iconfont icon-youxiang"></i>

      <span>cgcg@gradlink.net</span>
      <!-- 客服头像图标 -->
      <i class="iconfont icon-kefu"></i>

      <span>在线客服</span>
      <span>工作时间 08:30-22:00</span>
    </div>
    <div class="footer-row">
      <img class="police" src="../assets/police.png" alt="">
      <span>公安备案号110105020311</span>
    </div>
    <div class="footer-row">
      <span>CopyRight</span>
      <i class="iconfont icon-banquan"></i>
      <span>2021 - 2025 毕业生之家</span>
    </div>
  </footer>

</template>

<style lang="scss" scoped>
.footer {
  text-align: center;
  /* 让每行内容居中 */
  padding: 20px 0;
  background-color: #fff;
}

.footer-row {
  margin-bottom: 10px;

  i {
    margin: 0 6px;
  }

  .icon-youxiang {
    font-size: 17px;
  }

  img {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: middle;
    margin-bottom: 3px;
  }

  .icon-banquan {
    font-size: 17px;
  }
}

.footer-row svg {
  margin: 0 5px;
  vertical-align: middle;
}
</style>
